<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script type="text/javascript" src="/static/echarts/echarts-5.3.3.js"></script>
<!--
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
-->

</head>
<body>

<div id="series" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    const dom = document.getElementById("series");
    var myChart = echarts.init(dom, null, {
        width: 600,
        height: 400
    });
    // 指定图表的配置项和数据
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: [
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };
/*    option = {
        xAxis: {
            type: 'category',
            data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                name: '2015',
                data: [89.3, 92.1, 94.4, 85.4]
            },
            {
                type: 'bar',
                name: '2016',
                data: [95.8, 89.4, 91.2, 76.9]
            },
            {
                type: 'bar',
                name: '2017',
                data: [97.7, 83.1, 92.5, 78.1]
            }
        ]
    };*/

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>
